<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>主页示例</title>



		<style>
			/* 整体页面布局，设置一些间距和背景色 */
			body {
			  font-family: Arial, sans-serif;
			  background-color: #f4f4f4;
			  margin: 0;
			  padding: 20px;
			}
		
			/* 对输入框和按钮所在的区域设置样式，比如添加边框、背景色、内边距等 */
			form {
			  background-color: white;
			  border: 1px solid #ccc;
			  border-radius: 5px;
			  padding: 20px;
			  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			  transition: transform 0.3s ease;
			}
		
			form:hover {
			  transform: translateY(-5px);
			}
		
			/* 每个输入框和对应的标签设置样式，比如设置宽度、间距等 */
			label,
			input[type="text"],
			input[type="button"] {
			  display: block;
			  margin-bottom: 10px;
			}
		
			input[type="text"] {
			  width: 100%;
			  padding: 10px;
			  border: 1px solid #ccc;
			  border-radius: 3px;
			  transition: border-color 0.3s ease;
			}
		
			input[type="text"]:focus {
			  border-color: #007BFF;
			}
		
			input[type="button"] {
			  background-color: #007BFF;
			  color: white;
			  padding: 10px 20px;
			  border: none;
			  border-radius: 3px;
			  cursor: pointer;
			  transition: background-color 0.3s ease;
			}
		
			input[type="button"]:hover {
			  background-color: #0056b3;
			}
		  </style>


<script>
    function hist() {
        // console.log("test");
        // var v1 = document.getElementById("d1").value;
        // var v2 = document.getElementById("d2").value;
        var req = "get";
        // console.log(req);

        var xhr = new XMLHttpRequest();
        var url = "";
        xhr.open("post", url, true);
        xhr.send(req);
        xhr.onload = function () {
            var response = xhr.responseText;
            console.log(response);
            document.getElementById("d3").value = response;
            // var response = xhr.responseText;
            // console.log(response);
            // document.getElementById("d2").value = response;   
        }
    }
</script>















		<script type="text/javascript">
			function init() {
				refresh();
			}

			function refresh() {
				var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
				var url = ""; // 请求的URL

				xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求

				var post_req = {
					"type": 1,
					"limit": "all"
				};

				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
						var response = xhr.responseText; // 获取响应数据
						var info = JSON.parse(response)  //将json字符串反序列化为json对象
						console.log(info); // 在浏览器控制台打印响应数据
						for (var i = 0; i < info.data.length; i++) {
							// console.log('data = ', info.data[i].val)

							if (info.data[i].key == 1) {
								document.getElementById('temp').value = info.data[i].val;
							} else if (info.data[i].key == 2) {
								document.getElementById('hum').value = info.data[i].val;
							} else if (info.data[i].key == 3) {
								document.getElementById('ill').value = info.data[i].val;
							}
						}						
					}
				};
				
				//将json对象序列化为json字符串
				xhr.send(JSON.stringify(post_req)); // 发送请求，并将数据转换为JSON字符串
			}

		</script>
	</head>
	<body onload="init()">
		<a href="index.html">主页</a>
		<a href="stm32.html">stm32示例页面</a>
		<a href="modbus.html">modbus示例页面</a>
		
		<div>
			<form>
				<br />


				<label for="temp">温度</label>
    <input type="text" id="temp" value="" />
    <label for="hum">湿度</label>
    <input type="text" id="hum" value="" />
    <label for="ill">光照</label>
    <input type="text" id="ill" value="" />
    <input type="button" name="bin" onclick="hist()" value="刷新数据">
				<br>
			</form>
		</div>		
	</body>
</html>
